<template>
  <div class="">
	<iw-header></iw-header>
	<!--面包屑导航-->
  <bread-crumb >&gt;名师在线</bread-crumb>
<!--主体内容-->
<article class="container">
    <h2 class="title2">金牌讲师</h2>
    <section class="teacher_list">
        <ul>
            <li class="clearfloat" v-for="(item,i) of list" :key="i">
                <img :src=imglist[i] alt=""/>
                <div>
                    <h3>鼻孔超人{{i+1}}号<span>{{item.maincourse}}</span></h3>
                    <dl>
                        <dt>工作经历：</dt>
                        <dd>{{item.experience}}</dd>
                    </dl>
                    <dl>
                        <dt>授课风格：</dt>
                        <dd>{{item.style}}。</dd>
                    </dl>
                </div>
            </li>
            
        </ul>
    </section>
</article>
	<iw-footer></iw-footer>
  </div>
</template>

<script>
import Header from '../components/Header.vue';
import Footer from '@/components/Footer.vue';
import BreadCrumb from '@/components/Breadcrumb.vue'
export default {
	data:()=>{
		return { 
			list:[],
			imglist:["https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2332723184,868491442&fm=26&gp=0.jpg","https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3360726929,722287392&fm=11&gp=0.jpg","https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=276773145,856990981&fm=26&gp=0.jpg","https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2612987681,1907659813&fm=26&gp=0.jpg","https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=130441716,2103653827&fm=11&gp=0.jpg"]
		}
	},
	mounted() {
		this.$http.get("/teacher/list").then(result=>{
			this.list=result.data.msg;
			
		}).catch(err=>{
			throw(err)
		})
	},
	components:{
		'iw-header':Header,
		'iw-footer':Footer,
		BreadCrumb,
	}
}	
</script>

<style>
	/*名师堂*/
	.title2 {
	    border-left:3px solid #77c558;
	    padding-left: 12px;
	    line-height: 20px;
	    font-weight: lighter;
	    font-size: 18px;
	}
	.title2>a {
	    float: right;
	    font-size: 14px;
	    color: #f90;
	    text-decoration: underline;
	}
	.title2>a:hover {
	    color:#f30;
	}
	.teacher_list {
	    margin-top: 13px;
	}
	.teacher_list ul li {
	    border-top:1px dotted #ccc;
	    padding: 30px 0;
	}
	.teacher_list ul li img {
	    float: left;
	    width: 150px;
	    height: 200px;
	}
	.teacher_list ul li>div {
	    float: left;
	    margin-left: 50px;
	    width: 720px;
	}
	.teacher_list ul li>div>h3 {
	    font-size: 16px;
	    font-weight: lighter;
	    color:#f60;
	    line-height: 30px;
	}
	.teacher_list ul li>div>h3>span {
	    margin-left: 20px;
	}
	.teacher_list ul li>div>dl {
	    font-size: 13px;
	    margin-top: 12px;
	}
	.teacher_list ul li>div>dl>dd {
	    color: #888;
	}
</style>
